<template>
	<div style="background:#F8F8F8;height:100vh;display: inline-block;width: 100%;">

		<el-row type="flex" justify="space-around" style="margin-top: 20px;">
			<el-col :span="6">
				
				<div class="grid-content " style="height: 822px;position: relative;">
					<div class="DatePickerLeft" style=" position: absolute;right: 10px;top: 10px;z-index: 99;">
						  <el-date-picker
						      v-model="monthTime"
						      type="month"
							  style="width: 150px;"
							  @change='ChangeMonth'
							 value-format="yyyy-MM"
						      placeholder="选择月份"
							  >
						 </el-date-picker>
					</div>
					<div id="chart_1" v-if="status==1"></div>
					<div id="chart_2" v-if="status==2"></div>
				</div>
			</el-col>
			<el-col :span="17">
				<div class="grid-content flex">
					<div style="margin-right: 40px;">
						<el-select v-model="taskName" placeholder="请选择" filterable @change="changeSelect">
							<el-option v-for="item in taskList" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
				 </div>
					<div class="DatePicker">
						<el-date-picker @change='changeTime' v-model="SelectTime" type="daterange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</div>
				</div>
				<div style="margin-top: 10px;background: #fff;">
					<el-table :data="list.list" style="width: 100%" v-loading="loading" height="700">
						<el-table-column label="历时(分钟)" width="150">
							<template slot-scope="scope">
								<div class="flex flex-col-center" style="margin-left: 20px;">
									<img v-if="scope.row.status==0" src="@/assets/status_1.png"
										style="width: 30px;height: 30px;" />
									<img v-if="scope.row.status==1" src="@/assets/status.png"
										style="width: 30px;height: 30px;" />
									<img v-if="scope.row.status==2" src="@/assets/status.png"
										style="width: 30px;height: 30px;" />
									<span style="margin-left: 10px;">{{scope.row.duration}}</span>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="time" label="日期" width="100">
							<template slot-scope="scope">
								{{scope.row.recCreateTime?scope.row.recCreateTime.slice(0,11):''}}
							</template>
						</el-table-column>
						<el-table-column prop="custName" label="客户">
						</el-table-column>
						<el-table-column prop="productName" label="产品名称">
						</el-table-column>
						<el-table-column prop="eventName" label="旅程事件">
							<template slot-scope="scope">
								<div style="color: #FF1C1C;">{{scope.row.eventName}}</div>
							</template>
				 	</el-table-column>
						<el-table-column label="币种" width="150">
							<template slot-scope="scope">
								<div>{{scope.row.currencyName}}</div>
							</template>
						</el-table-column>
						<el-table-column label="金额（元）" width="150">
							<template slot-scope="scope">
								<div>{{scope.row.amount}}</div>
							</template>
						</el-table-column>
						<el-table-column label="发起时间" width="100">
							<template slot-scope="scope">
								<div>{{scope.row.recCreateTime?scope.row.recCreateTime.slice(5,16):''}}</div>
							</template>
						</el-table-column>
						<el-table-column label="完成时间" width="100">
							<template slot-scope="scope" v-if="scope.row.status==1">
								<div>{{scope.row.recReviseTime?scope.row.recReviseTime.slice(5,16):''}}</div>
							</template>
						</el-table-column>
						<el-table-column label="详情" width="80">
				 		<template slot-scope="scope">
								<div class="flex ">
									<!-- <div class="flex">
				  					<span>客户专员处理</span>
				  					<span style="margin: 0 10px;">
				  						<img src="@/assets/right_circle.png" style="width: 24px;height: 24px;" />
				  					</span>
				  					<span>风控专员处理</span>
				  				</div> -->
									<div>
										<el-button
											style="background: linear-gradient(180deg, #0169FF 0%, #14B7FF 100%);"
											@click="edit(scope.row)" size="small" type="primary">
											详情
										</el-button>
									</div>
								</div>
							</template>
				 	</el-table-column>
					</el-table>
					<div style="display:flex;justify-content: flex-end;padding: 20px;">
						<basePagination :size="list.size" :page="list.current" :total="list.total"
							@SizeChange='SizeChange' @CurrentChange='CurrentChange' />
					</div>
				</div>
			</el-col>
		</el-row>
		<baseStep :detail="detail" ref='stepChild'></baseStep>
	</div>
</template>

<script>
	import loader from '@/components/base/basePagination/controls.js';

	import * as echarts from 'echarts';
	import charts_1 from './charts_1.js';
	import charts_2 from './charts_2_shu.js';

	export default {
		mixins: [loader],
		data() {
			return {
                monthTime:'',
				detail: [],
				status: '',
				taskName: '',
				taskList: [],
				SelectTime: [],
				custId: '',
				limit: 10,
				page: 1,
				list: {},
				loading: true
			}
		},
		created() {
			this.monthTime=this.transTimeCurrent(new Date())
			let time1 = this.transFixTime(new Date());
			let time2 = this.transTime(new Date())
			this.SelectTime = [time1, time2]
			let {
				status
			} = this.$route.query;
			this.status = status;

			this.jiazai();
			this.getTaskName()

		},
		mounted() {
			if(this.status==1){
				this.getCharts_1()
			}
			if(this.status==2){
				this.getCharts_2()
			}
			
		},
		methods: {
			edit(item) {
				this.axios.get("/report/business/getWorkMap", {
					params: {
						uniqueCode: item.uniqueCode
					}
				}).then(res => {
					let currentList = res.data.currentList;
					if (!currentList.length) {
						this.$message.error({
							message: "暂无流程",
							center: true
						})
						return
					}
					var arr = [];
					for (var i = 0; i < currentList.length; i += 4) {
						arr.push({
							arr: currentList.slice(i, i + 4)
						});
					}
					this.detail = arr;
					this.$refs.stepChild.dialogVisible = true
				}).catch(error => {})
			},
			getCharts_1() {
				this.axios.get("/report/business/getBusinessEventTypeNum", {params:{monthTime:this.monthTime}}).then(res => {
					let productName = res.data.eventName;
					let businessNum = res.data.durationAvg;
					let myChart_1 = echarts.init(document.getElementById('chart_1'));
					charts_1.title[1] = []
					charts_1.yAxis.data = productName;
					charts_1.series[0].data = businessNum;
					myChart_1.setOption(charts_1);
					//建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
					window.addEventListener('resize', function() {
						myChart_1.resize()
					});

				}).catch(error => {})
			},	
			getCharts_2() {
				this.axios.get("/report/business/getWorkTimeNum",{params:{monthTime:this.monthTime}} ).then(res => {
					console.log(res, "res")
					let taskName = res.data.taskName;
					let timeNum = res.data.timeNum;
					let myChart_2 = echarts.init(document.getElementById('chart_2'));
					let charts = charts_2;
					charts_2.title[1] = []
					charts_2.yAxis.data = taskName;
					charts_2.series[0].data = timeNum;
					myChart_2.setOption(charts);
					window.addEventListener('resize', function() {
						myChart_2.resize()
					});
				}).catch(error => {})
			},
			changeSelect(e) {
				this.taskName = e;
				this.page = 1;
				this.jiazai()
			},
			SizeChange(e) {
				this.loading = true;
				this.limit = e.size;
				this.jiazai();
			},
			CurrentChange(e) {
				this.loading = true;
				this.page = e.page;
				this.jiazai();
			},
			getTaskName() {
				if (this.$route.query.status == 1) {
					this.axios.get("/report/type/getTypeNameList ", {

					}).then(res => {
						let arr = res.data.list;
						let newArr = []
						arr.forEach(item => {
							newArr.push(item.eventName)
						})
						this.taskList = newArr
					}).catch(error => {})
				} else {
					this.axios.get("/report/type/getWorkNameList", {

					}).then(res => {


						this.taskList = res.data.list
					}).catch(error => {})
				}

			},

			jiazai() {
				if (this.status == 1) {
					this.axios.get('/report/business/getBusinessByList', {
						params: {
							eventName: this.taskName,
							limit: this.limit,
							page: this.page,
							startTime: this.SelectTime[0],
							endTime: this.SelectTime[1]
						}
					}).then(res => {

						this.list = res.data;
						this.loading = false;
					}).catch(error => {})
				} else {
					this.axios.get('/report/business/getBusinessWorkByList', {
						params: {
							taskName: this.taskName,
							limit: this.limit,
							page: this.page,
							startTime: this.SelectTime[0],
							endTime: this.SelectTime[1]
						}
					}).then(res => {

						this.list = res.data;
						this.loading = false;
					}).catch(error => {})

				}

			},
			changeTime(e) {
				let stare = this.transTime(e[0]);
				let end = this.transTime(e[1]);
				this.SelectTime = [stare, end];
				this.page = 1;
				this.jiazai();
			},
			transTimeCurrent(dateTme) {
				const Y = dateTme.getFullYear()
				const M = dateTme.getMonth() + 1 < 10 ? "0" + (dateTme.getMonth() + 1) : dateTme.getMonth() + 1
				const D = dateTme.getDate() < 10 ? "0" + dateTme.getDate() : dateTme.getDate()
				return Y + "-" + M 
			},
			transTime(dateTme) {
				const Y = dateTme.getFullYear()
				const M = dateTme.getMonth() + 1 < 10 ? "0" + (dateTme.getMonth() + 1) : dateTme.getMonth() + 1
				const D = dateTme.getDate() < 10 ? "0" + dateTme.getDate() : dateTme.getDate()
				return Y + "-" + M + "-" + D
			},
			transFixTime(dateTme) {
				const Y = dateTme.getFullYear()
				const M = dateTme.getMonth() + 1 < 10 ? "0" + (dateTme.getMonth() + 1) : dateTme.getMonth() + 1
				const D = dateTme.getDate() < 10 ? "0" + dateTme.getDate() : dateTme.getDate()
				return Y + "-" + M + "-" + "01"
			},
			ChangeMonth(e){		
				this.monthTime=e;
				if(this.status==1){
					this.getCharts_1()
				}
				if(this.status==2){
					this.getCharts_2()
				}

			}
		}
	}
</script>

<style scoped style="scss">
    
		
		
	
	.grid-content {
		background: #fff;
		padding: 20px;
	}

	#chart_1 {
		width: 400px;
		height: 500px;
		margin: 0 auto;
	}

	#chart_2 {
		width: 400px;
		height: 500px;
		margin: 0 auto;
	}

	/* .DatePicker{
	  	
	  }
	  .DatePicker .el-input__inner  {
	  	border: 2px solid #3EA3FF;
	  	color: #3EA3FF!important;
	  }
	  
	  .DatePicker .el-range-input , .el-range-separator , .el-range__icon {
	  	color: #3EA3FF!important;
	  } */
</style>
